<template>
  <div class="content-wrap">
    <van-nav-bar title="聊天信息" left-arrow @click-left="$router.go(-1)">
    </van-nav-bar>
    <div class="content">
      <user-msg-box avatar-size="large" style="margin-top: .4rem"></user-msg-box>
      <div class="user-list-wrap van-hairline--top">
        <div class="user-item" v-for="i in 6" :key="i">
          <router-link :to="{name: 'friendDetail', params: {id: 1}}" tag="div" class="avatar">
            <img src="">
          </router-link>
          <p class="name">张二娃</p>
        </div>
      </div>

      <van-cell-group class="checkGroup">
        <van-cell title="群二维码" is-link :to="{name: 'groupQrcode', params: {id: $route.params.id}}" />
        <van-cell title="群公告" label="暂无群介绍" is-link />
        <van-cell title="群介绍" label="暂无群介绍" is-link />
      </van-cell-group>

      <van-cell-group class="checkGroup">
        <van-cell title="我在本群的昵称" value="啊哈哈" is-link />
        <van-switch-cell v-model="disturbChecked" :loading="disturbCheckedLoading" title="消息免打扰" />
        <van-switch-cell v-model="topChecked" :loading="topCheckedLoading" title="置顶聊天" />
      </van-cell-group>

      <van-cell-group class="checkGroup">
        <van-cell title="清空聊天记录" is-link />
      </van-cell-group>

      <div class="btn-wrap">
        <van-button type="danger" block>退出</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'groupSetting',
    data () {
      return {
        disturbChecked: false,
        topChecked: false,
        disturbCheckedLoading: false,
        topCheckedLoading: false
      }
    }
  }
</script>

<style scoped lang="scss">

  .content {
    flex: 1;
    overflow: auto;
  }
  .user-list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: .2rem;
    background: #fff;
    .user-item {
      width: .9rem;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin: .2rem;
    }
    .avatar {
      width: 0.9rem;
      height: .9rem;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .name {
      color: #333;
      margin-top: .2rem;
      text-align: center;
    }
  }

  .btn-wrap {
    padding: .4rem;
  }
</style>
